第 1 步 - 准备从右向左书写地区的应用程序

在本教程的这一步骤中，您将学习如何为从右向左书写地区准备已本地化的应用程序。在后续步骤中，您将学习设置布局并使用 Kanzi Engine API 根据选定的地区实例化正确的预设件。

教程资产

您在本教程中使用的资产存储在 <KanziWorkspace>/Tutorials/Localization RTL/Assets 目录中：

• Fonts 目录包含的字体包括 Arabic 和 Hebrew 字形。
• Images 目录含有用于从右向左书写地区的图像。
• Text 目录含有包含起点工程的已翻译文本内容的 .po 文件。

<KanziWorkspace>/Tutorials/Localization RTL/Completed 目录包含本教程已完成的应用程序。

本教程的起点资料是存储在<KanziWorkspace>/Tutorials/Localization/Completed/Tool_project 目录中的Localization.kzproj Kanzi Studio 工程文件。工程包含完成本教程需要的内容：

• 2D 网格布局 (Grid layout 2D) 节点名为IVI Grid，定位应用程序用户界面元素。您调整从右向左书写地区的布局时，IVI Grid 中的网格布局使您可以在保持其绝对位置的情况下在行和列之间平稳移动元素。
  
  • 2D 网格布局 (Grid layout 2D) 节点名为LocationInformation，包含并定位应用程序内容。
    
  • 2D 网格布局 (Grid layout 2D) 节点名为Apps，包含并定位在应用程序用户界面底部显示的应用程序名称。
    
  • 2D 切换按钮组 (Toggle Button Group 2D)名为Locales，包含要更改地区的按钮节点。
    
    • 2D 堆栈布局 (Stack Layout 2D) 节点名为LocaleSelector，包含在Kanzi Studio中创建的地区的按钮。
      
• LocaleButton 预设件显示在 Kanzi Studio中创建的各地区按钮示例及使用 Kanzi Engine API 加载的其他地区。
  

为从左向右和从右向左布局创建预设件

在本节中，您将学习从LocaleSelector 和IVI Grid 节点创建预设件。使用LocaleSelector 预设件定位地区按钮和IVI Grid 预设件，设置选定地区的正确布局。在下一步骤中，您将学习更改这些预设件，使其正确定位从左向右或从右向左书写地区的应用程序用户界面元素。

要为从左向右和从右向左布局创建预设件：

1. 打开位于 <KanziWorkspace>/Tutorials/Localization/Completed/Tool_project 的已完成的本地化教程工程。
2. 准备 LocaleSelector 节点，将其用作预设件，定位地区按钮：
   
   1. 从工程 (Project) > IVI Grid > Locales 中将 LocaleSelector 节点拖到预设件 (Prefabs) 来创建预设件。
      将节点放到 预设件 (Prefabs) 窗口中时，Kanzi Studio 从节点创建预设件模板，并用预设件的实例替换原始节点。
      
   2. 在工程 (Project) > IVI Grid > Locales 中删除 LocaleSelector 节点。
      
   3. 在工程 (Project) 中选择屏幕 (Screen)，在字典 (Dictionaries) 中删除 LocaleSelector 别名。
      由于您使用 Kanzi Engine API 设置各地区的布局，所以不再需要这些别名。
      
3. 为从左向右和从右向左书写地区布局创建预设件：
   1. 在工程 (Project) 中将 IVI Grid 节点拖到预设件 (Prefabs) 并将其命名为 IVI Grid LeftToRight。
      对从左向右书写地区使用 IVI Grid LeftToRight 预设件。
      
   2. 在预设件 (Prefabs) 中选择 IVI Grid LeftToRight 节点，按下 Ctrl D 复制节点并将其重命名为 IVI Grid RightToLeft。
      对从右向左书写地区使用 IVI Grid RightToLeft 预设件。
      
4. 在工程 (Project) > RootPage 中右键点击IVI Grid 节点并选择删除 (Delete)。
   
   
5. 在工程 (Project) 中按下 Alt 并右键点击RootPage，创建2D 预设件视图 (Prefab View 2D) 节点并将其命名为 IVI Grid。
   使用2D 预设件视图 (Prefab View 2D) 节点实例化地区的IVI Grid LeftToRight和IVI Grid RightToLeft预设件。
   
   
6. 选择 IVI Grid 2D 预设件视图 (Prefab View 2D) 节点，在属性 (Properties) 中添加并设置预设件模板 (Prefab Template) 属性为IVI Grid LeftToRight。
   实例化具有预设件视图 (Prefab View) 节点的预设件时，Kanzi 会读取预设件模板 (Prefab Template) 属性的值并将该属性所指的预设件添加为预设件视图 (Prefab View) 节点的子节点。
   
7. 在预设件 (Prefabs) 中拖动 LocaleSelector 预设件到 IVI Grid LeftToRight > Locales 节点，以创建预设件占位符。
   您可使用LocaleSelector预设件占位符为从左向右和从右向左书写地区实例化LocaleSelector。
   
8. 为IVI Grid RightToLeft节点重复上一步骤，创建LocaleSelector 节点的预设件占位符。
   

在预览 (Preview) 中，当您点击地区按钮时，您无法看到地区间的切换。您在本教程的最后一步中运行应用程序时才可看到地区切换。

为从右向左书写地区导入 .po 文件

在本节中，导入包含Arabic 和Hebrew 地区的已翻译文本的 .po 文件。

要为从右向左书写地区导入 .po 文件：

1. 在素材库 (Library) > 本地化 (Localization) 中右键点击本地化表（主）(Localization Table, Main) 本地化表，选择手动导入本地化表 (Import Localization Table Manually)，转到 <KanziWorkspace>/Tutorials/Localization RTL/Assets/Text 并导入包含 Arabic 和 Hebrew 地区文本字符串的 ar-AR.po 和 he-HE.po 文件。
   Kanzi Studio 会创建 .po 文件中指定的地区，并将翻译从 .po 文件添加到本地化表。
   
2. 在素材库 (Library) > 本地化 (Localization) 双击本地化表（主）(Localization Table, Main)，在本地化编辑器 (Localization Editor) 中设置Arabic 的LocaleDisplayName为 العربية，Hebrew 为 עברית。
   LocaleDisplayName 是设置应用程序用户界面中显示的地区名称的文本资源。
   

设置从右向左书写地区使用的图像

在本节中，您将为从右向左书写地区使用的应用程序背景图像创建纹理笔刷，并设置这些地区中使用的图像。

要设置从右向左书写地区使用的图像：

1. 在资产 (Assets) 中点击导入资产 (Import Assets) 并从 <KanziWorkspace>/Tutorials/Localization RTL/Assets/Images 导入所有图像。
   您可以导入用于Arabic 和Hebrew 地区的图像以及从右向左书写地区的应用程序背景图像。当您导入图像时，Kanzi Studio 会从导入的图像创建纹理。
   
2. 在素材库 (Library) > 材质和纹理 (Materials and Textures) 中按下 Alt 并右键点击笔刷 (Brushes)，选择纹理笔刷 (Texture Brush) 并命名为 Background RightToLeft。
   
3. 在素材库 (Library) 中选择 Background RightToLeft 笔刷，在属性 (Properties) 中将笔刷纹理 (Brush Texture) 设为Background RightToLeft 纹理。
   
4. 在预设件 (Prefabs) 中选择 IVI Grid RightToLeft 预设件，并在属性 (Properties) 中将背景笔刷 (Background Brush) 设为 Background RightToLeft。
   Background RightToLeft背景笔刷设置从右向左书写地区的应用程序背景图像。
   
5. 在本地化编辑器 (Localization Editor) 中设置Arabic 地区的图像 (Image)为Image07，Hebrew为Image08。
   为Arabic 和Hebrew 地区设置显示在应用程序用户界面的图像。
   

为从右向左书写地区创建样式

在本节中，导入含有Arabic 和Hebrew 字形的字体，并创建设置这些地区的字体和文本对齐的样式。

要为从右向左书写地区创建样式：

1. 选择 文件 (File) > 导入 (Import) > 导入字体 (Import Fonts) 并从 <KanziWorkspace>/Tutorials/Localization RTL/Assets/Fonts 导入含有 Arabic 和 Hebrew 字形的字体。请参阅导入字体。
   为Arabic 导入 notonaskharabic-regular.ttf，为Hebrew 导入notosanshebrew-regular.ttf。
   
2. 在素材库 (Library) > 样式 (Styles) 中选择 LocaleStyle，按下两下 Ctrl D 以复制两次，并将样式命名为使用样式的地区。
   例如，命名Arabic 地区的样式为LocaleStyle-ar、Hebrew 地区的样式为LocaleStyle-he。
   
   
3. 选择 LocaleStyle-ar 并在属性 (Properties) 中添加和设置：
   • 字体 (Font) 为notonaskharabic-regular.ttf
   • 文本水平对齐 (Text Horizontal Alignment) 为右对齐 (Right)
   对Arabic 地区使用样式设置正确的字体和文本对齐方式。
   
4. 对 LocaleStyle-he 重复上一步骤，但将字体 (Font) 属性设为 notosanshebrew-regular.ttf。
   
   
5. 在Localization Table 中，在您要应用所创建样式的每个地区的列中双击LocaleStyle 单元格并设置：
   • Arabic 设置 LocaleStyle-ar
   • Hebrew 设置 LocaleStyle-he
   

另请参阅

教程：本地化您的应用程序

本地化应用程序

使用样式

使用预设件

打开导航